<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
    <div class="debugTerminal">
        <nu-col :span="24" style="height:calc(50vh - 75px);margin:0">
            <nutbTitle title="报文原码">
                <!-- <el-autocomplete v-model="activeEquipName" :fetch-suggestions="querySearchAsync" placeholder="按计量点筛选"
                    @select="handleSelect" value-key="value" style="width: 300px;">
                </el-autocomplete> -->
                <!-- <el-select v-model="activeEquipName" filterable placeholder="请输入计量点名称">
                    <el-option v-for="item in restaurants" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select> -->
                <!-- <el-button slot="append" icon="el-icon-search"
                            @click="activeEquipNameClick"></el-button> -->
            </nutbTitle>
            <div class="operate">
                <!-- <el-radio-group v-model="activeTabName" @input="handleClick">
                    <el-radio-button :label="item.label" v-for="item in tabList" :key="item.key"></el-radio-button>
                </el-radio-group> -->
                <el-button-group>
                    <el-button v-for="item in tabList" :key="item.key"
                        :class="activeTabName === item.key ? 'active-item' : ''"
                        @click="handleClick(item.key, item.label)">{{ item.label }}</el-button>
                </el-button-group>
                <div class="tabInfor">
                    <div class="content" ref="messageInfor">
                        <!-- <vue-seamless-scroll :data="messageList" class="seamless-warp" :class-option="classOption"
                            ref="scroll3"> -->
                        <p v-for="(k, i) in messageList" :key="i">
                            <span style="font-weight: 600;">{{ k.recordTime }}</span> <span>{{ k.id }}</span><span>{{
                                k.directionName }}</span>
                            <span>{{ k.content }}</span>
                        </p>
                        <!-- </vue-seamless-scroll> -->
                    </div>
                </div>
            </div>
        </nu-col>
        <nu-col :span="24" style="height:calc(50vh - 90px);margin: 30px 0px;">
            <nutbTitle title="调试信息"></nutbTitle>
            <div class="debugInfor">
                <div class="content" ref="debugInfor">
                    <p v-for="(k, i) in debuginfoList" :key="i">
                        <span style="font-weight: 600;">{{ k.recordTime }}</span> <span>{{ k.id }}</span><span>{{ k.content
                        }}</span>
                    </p>
                </div>
            </div>

        </nu-col>
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import vueSeamlessScroll from 'vue-seamless-scroll'
import Stomp from "stompjs";
export default {
    name: "debugTerminal",
    components: { nuCol, nutbTitle, vueSeamlessScroll },
    data() {
        return {
            activeTabName: 'up',
            tableTitle: '报文源码',
            tabList: [
                { label: '上行显示', key: 'up' },
                { label: '下行显示', key: 'down' },
                { label: '上下行显示', key: 'upDown' },
                // { label: '停止滚动', key: 'stop' },
                { label: '清空屏幕', key: 'clear' }
            ],
            activeEquipName: '',
            messageList: [],
            debuginfoList: [],
            restaurants: [],
            state: '',
            timeout: null,
            recent: 15,
            ws: null,
            subscriptionSource: null,
            subscriptionDebugin: null,
            stompClient: null,
            wsTimer: null
        };
    },
    computed: {
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    created() {
    },
    mounted() {
        this.loadAll();
        this.initWenSocket()
    },
    beforeDestroy() {
        if (this.subscriptionSource) {
            this.subscriptionSource.unsubscribe();
        }
        if (this.subscriptionDebugin) {
            this.subscriptionDebugin.unsubscribe();
        }
        if (this.ws) {
            this.ws.close()
        }
        if (this.wsTimer) {
            clearInterval(this.wsTimer);
        }
    },
    methods: {
        initWenSocket() {
            if (this.ws) {
                this.ws.close()
            }
            if (this.subscriptionSource) {
                this.subscriptionSource.unsubscribe();
            }
            if (this.subscriptionDebugin) {
                this.subscriptionDebugin.unsubscribe();
            }
            let that = this
            var socketUrl = "ws://" + location.host + process.env.VUE_APP_BASE_WEBSOCKET

            this.ws = new WebSocket(socketUrl)
            that.stompClient = Stomp.over(that.ws);
            that.stompClient.connect({}, function (frame) {
                that.subscribeSource(0)
                that.subscribeDebuginfo(2)
            })
            // this.ws.onopen = function (event) {
            //     console.log('Websocket 连接成功');
            //     clearInterval(that.wsTimer);
            // };
            // this.ws.onclose = function (event) {
            //     that.wsTimer = setInterval(function () {
            //         if (that.ws.readyState === 3) {
            //             that.initWenSocket();
            //         }
            //     }, 5000);
            // }
        },
        subscribeSource(key) {
            //订阅报文源码
            if (this.subscriptionSource) {
                this.subscriptionSource.unsubscribe();
            }
            this.messageList = []
            this.subscriptionSource = this.stompClient.subscribe("/linklog/log/" + key, response => {
                if (response.body) {
                    let b = JSON.parse(response.body)
                    if (this.messageList.length > 50) {
                        this.messageList.splice(0, 1)
                    }
                    this.messageList.push(b)
                    this.$nextTick(() => {
                        let scrollElem = this.$refs.messageInfor; // 对应ref的命名
                        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
                    });
                }
            })
        },
        subscribeDebuginfo(key) {
            //订阅调试信息
            this.subscriptionDebugin = this.stompClient.subscribe("/linklog/log/" + key, response => {
                if (response.body) {
                    let b = JSON.parse(response.body)
                    if (this.debuginfoList.length > 50) {
                        this.debuginfoList.splice(0, 1)
                    }
                    this.debuginfoList.push(b)
                    this.$nextTick(() => {
                        let scrollElem = this.$refs.debugInfor; // 对应ref的命名
                        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
                    });
                }
            })
        },
        /**
         * tab事件
         */
        handleClick(key, la) {
            this.activeTabName = key
            if (key == 'clear') {
                this.messageList = []
                this.debuginfoList = []
                return false
            }
            if (la == '停止滚动') {
                this.$refs.scroll3._cancle()
                this.tabList[3].label = '继续滚动'
            } else if (la == '继续滚动') {
                this.$refs.scroll3._startMove()
                this.tabList[3].label = '停止滚动'
            }
            let dir = null
            if (key == 'up') {
                dir = 0
                this.subscribeSource(dir)
            } else if (key == 'down') {
                dir = 1
                this.subscribeSource(dir)
            } else if (key == 'upDown') {
                dir = 100
                this.subscribeSource(dir)
            }
        },
        /**
         * 计量点筛选
         */
        activeEquipNameClick() {
            console.log(this.activeEquipName)
        },
        /**
         * 返回输入建议的方法
         * @param {*} queryString 
         * @param {*} cb 
         */
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 0);
        },
        /**
         * 过滤数据
         * @param {*} queryString 
         */
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        /**
         * 点击选中建议项时触发
         * @param {*} item 
         */
        handleSelect(item) {
            console.log(item);
            this.activeEquipNameClick()
        },
        // 远程搜索数据
        async loadAll() {
            let postData = {
                pageSize: 10000,
                page: 1,
            };
            let data = await this.$httpGet(window.api.getMesaNames, postData).then(res => {
                if (res.code == 200) {
                    return res.mesaNames
                }
            })
            data = await data.map(item => { return { value: item } })
            data.unshift({ name: '全选', value: '全选' })
            this.restaurants = data
        },
    }
};
</script>
    
<style scoped lang="scss">
.debugTerminal {
    height: 100%;
}

.operate {
    position: relative;
    margin: 10px 10px 0;
    height: calc(100% - 40px - 15px);
}

::v-deep .el-button {
    border: 0.5px solid rgba(242, 246, 252, 1)
}

.debugInfor {
    margin-top: 15px;
    height: calc(100% - 40px - 15px);
}

.tabInfor {
    padding-top: 15px;
    height: calc(100% - 15px);
    border-top: 1px solid rgba(242, 246, 252, 1);
}

.content {
    overflow-x: hidden;
    height: 100%;

    p {
        margin: 0 0 0 10px;
        font-size: 14px;
        color: #797979;

        span {
            margin: 0 10px 0 0;
        }
    }

    .seamless-warp {
        width: 100%;
        height: calc(100% - 16px);
        overflow: hidden;
    }
}

::v-deep .el-tabs {
    height: 100%;

    .el-tabs__content {
        height: calc(100% - 51px);
        overflow-x: hidden;

        .el-tab-pane {
            height: 100%;
        }
    }
}

::v-deep .el-tabs__item {
    height: 35px;
    line-height: 35px;
}

::v-deep .el-dropdown {
    position: absolute;
    top: 0;
    left: 499px;
}

::v-deep .el-button:hover,
::v-deep .el-button:focus {
    background: #FFFFFF;
    border: 1px solid rgba(242, 246, 252, 1);
    border-color: rgba(242, 246, 252, 1);
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #dfe4ed;
}

.activeEquipName {
    position: absolute;
    top: 8px;
    left: 650px;
    font-size: 14px;
}

::v-deep .el-button--medium {
    background: transparent;
}

.active-item {
    color: rgba(71, 99, 255, 1);
}

::v-deep .el-button--medium:hover,
::v-deep .el-button--medium:focus {
    background: transparent;
}

.el-autocomplete {
    position: absolute;
    right: 0;
    top: 0;
}

.el-select {
    position: absolute;
    right: 0;
    top: 0;
}

::v-deep .el-radio-button__inner {
    border: 0.5px solid rgba(242, 246, 252, 1);
    border-left: 0;
}

::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #FFFFFF;
    color: rgba(71, 99, 255, 1);
    border-color: rgba(242, 246, 252, 1);

    border-bottom: 0.5px solid #dfe4ed;
    box-shadow: none;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
    border-left: 1px solid rgba(242, 246, 252, 1);
}
</style>
    
    